<template>
    <a-render>
        <template #leftheader>
            <div class="dis-flex flex-align-center margin-bottom-16">
                <h2 class="render-hedaer-title margin-right-16">{{ detailed.username }}</h2>
                <Tag :type="userStatusOptions.useDictItem(detailed?.status)?.type">{{ userStatusOptions.useDictItem(detailed?.status)?.label }}</Tag>
            </div>
            <span>卡号：451245123</span>
            <span class="margin-left-16">办卡日期：2024-05-28 ~ 2025-05-27</span>
        </template>
        <template #rightheader>
            <a-space>
                <a-button type="primary">开馆</a-button>
                <a-button type="primary">闭馆</a-button>
                <a-button type="link">删除</a-button>
            </a-space>
        </template>
        <section class="section-module">
            <h4 class="section-title">借阅列表</h4>
            <Table ref="tabelRef" :data="dataList" :column="column" :operation="false" @page="changePage"></Table>
        </section>
        <section class="section-module">
            <h4 class="section-title">黑名单</h4>
        </section>
        <section class="section-module" v-if="isShowapplCardModules">
            <h4 class="section-title">办卡押金</h4>
            <div class="time-line">
                <div class="item">
                    <div class="time">
                        <span>2024-05-05</span>
                        <Tag type="success">成功</Tag>
                    </div>
                    <div class="content">读者申请退回</div>
                </div>
                <div class="item">
                    <div class="time">
                        <span>2024-05-05</span>
                        <Tag type="success">成功</Tag>
                    </div>
                    <div class="content">读者申请退回</div>
                </div>
            </div>
        </section>
    </a-render>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from "vue"
import Tag from "@/components/tag/index.vue"
import Table from "@/components/table/index.vue"
import { useRouter } from "vue-router"
// api
import { borrowdetailed } from "@/api"
// 搜索和表格配置
import { useDetailed } from "./column"
import { useBorrowlist } from "@/views/book/borrowlist/list/use-borrowlist.js"
// hook
import { useTable } from "@/hook/index"
// dict
import { useDict } from "@/dict/index.js"
// 用户状态
const userStatusOptions = useDict('userStatusOptions')
const { column } = useDetailed()
const tabelRef = ref(null)
const router = useRouter()
const id = router.currentRoute.value.params.id
const { uesSetTotal, usePage, useSize, useSearch, useReset } = useTable(tabelRef)
const { useGetBookList, dataList: list } = useBorrowlist()
const dataList = ref([])
// 用户信息
const detailed = ref({})
// 办卡列表
const payList = ref([])
// 请求参数
const req = reactive({
  pageIndex: usePage,
  pageSize: useSize,
})

/**
 * 分页
 */
 const changePage = (page, size) => {
  req.pageIndex = page
  req.pageSize = size
  getList()
}

onMounted(() => {
    getList()
})

const getList = () => {
    borrowdetailed({id}).then(res => {
        detailed.value = res.content?.data?.user || {}
        payList.value = res.content?.data?.list || []
    })
    useGetBookList({
        ...req,
        id
    })
}
/**
 * 办卡押金
 */
const isShowapplCardModules = computed(() => {
    // 数据字典配置结果
    const showModules = userStatusOptions.useDictItem(detailed.value?.status)?.applCardModules
    // 业务状态
    const list = payList.value?.length
    // 结果
    return showModules && list
})

</script>
<style lang="scss" scoped>
.section-module {
    margin-bottom: 40px;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 40px;
}
.section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 24px;
}
.time-line {
    .item {
        position: relative;
        padding-bottom: 24px;
        padding-left: 32px;
        &:last-child:after { display: none; }
        &:first-child:after { top: 5px; }
        &:after {
            content: "";
            position: absolute;
            border-left: 1px solid #e0e0e0;
            left: 0px;
            top: 0;
            bottom: -5px;
        }
        &:before {
            content: "";
            position: absolute;
            width: 11px;
            height: 11px;
            background-color: #e0e0e0;
            border-radius: 50px;
            left: -6px;
            top: 3px;
        }
    }
    .time {
        display: flex;
        align-items: center;
        span {
            margin-right: 16px;
        }
    }
    .content {
        margin-top: 12px;
    }
}
</style>